<template>
  <view class="container">
    <button @click="downloadImage">下载网络图片</button>
    <image v-if="downloadedImage" :src="downloadedImage" mode="widthFix" style="width: 100%; margin-top: 20rpx;" />
  </view>
</template>

<script setup>
import { ref } from 'vue';
const downloadedImage = ref('');


const downloadImage = () => {
  const downloadTask = uni.downloadFile({
    url: 'https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg',
    success: (res) => {
      if (res.statusCode === 200) {
        downloadedImage.value = res.tempFilePath;
        uni.showToast({ title: '下载完成', icon: 'success' });
      }
    },
    fail: (err) => {
      uni.showToast({ title: '下载失败', icon: 'none' });
      console.error(err);
    }
  });

  downloadTask.onProgressUpdate((res) => {
    console.log(`下载进度：${res.progress}%`);
    console.log(`已下载大小：${res.totalBytesWritten / 1024}KB`);
    console.log(`文件总大小：${res.totalBytesExpectedToWrite / 1024}KB`);
  });
};
</script>